{% extends 'admin/admin_base.html' %}
{% block title %}{% if 'create' == cha[0] %}增加{% elif 'change' == cha[0] %}修改{% else %}查看{% endif %}-图片管理{% endblock %}
{% block head %}
    {{ super() }}

{% endblock %}
{% block body %}

    <ul class="nav nav-tabs">
        {% if 'change' == cha[0] %}
            <li onclick="chick_1()"><a href="#">保存</a></li>
        {% elif 'create' == cha[0] %}
            <li onclick="chick()"><a href="#">保存</a></li>
        {% endif %}

        <li><a href="{{ url_for('myimage.index') }}">取消</a></li>
    </ul>
    <div class="admin-form form-horizontal">
    <form action="{{ url_for('myimage.change_avatar') }}" method=post enctype=multipart/form-data>
    {% if 'check' == cha[0] or 'change' == cha[0]%}
        <div class="form-group">
            <label for="id" class="col-md-2 control-label">ID</label>
            <div class="col-md-10" style="width: 30%">
            <input class="form-control" id="id" name="id" type="text" value="{{ cha[1]['id'] }}" readonly="true">
            </div>
        </div>
    {% endif %}
        <div class="form-group">
            <label for="user" class="col-md-2 control-label">名称</label>
            <div class="col-md-10" style="width: 30%">
            {% if 'check' == cha[0]%}
            <input class="form-control" id="user" name="user" type="text" value="{{ cha[1]['name'] }}" readonly="true">
            {% elif 'change' == cha[0] %}
                <input class="form-control" id="user" name="user" type="text" value="{{ cha[1]['name'] }}">
            {% else %}
                <input class="form-control" id="user" name="user" type="text">
            {% endif %}
            </div>
        </div>
        {#                文件的#}
        {% if 'change' == cha[0] or 'check' == cha[0] %}
            <div class="form-group">
                <label for="filename" class="col-md-2 control-label">上传图片</label>
                <div class="col-md-10" style="width: 30%">
                    <img src="{{ url_for('static',filename=cha[1]['Route']) }}" width="150" height="150" alt="..." class="img-thumbnail" id="myImg">
                    {% if 'change' == cha[0] %}
                        <input type=file name=file accept="image/png, image/jpeg, image/gif, image/jpg" onchange="changImg(event)"><br/>
                        <input type=submit value=上传文件>
                            <strong style="color: red">推荐大小：1270 * 250</strong>
                    {% endif %}
                </div>
            </div>
        {% endif %}
        <label class="col-md-2 control-label"></label>
            <div class="col-md-10" style="width: 30%">
                <p id="message1" style="color: red;"></p>
            </div>
    </form>
    </div>
    <input id="photo" style="position: absolute; top: -9999px; left: -9999px;" value="{{ cha[0] }}"/>
{% endblock %}
{% block tail %}
        {{ super() }}
{#    <!--{{ lib.form_js() }}-->#}
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
    <script type="text/javascript">
        function chick() {
            var name = document.getElementById('user').value;
            var gg = document.getElementById('photo').value;
            $.ajax({
                headers: {"X-CSRFToken": '{{ csrf_token }}'},
                url: "myimage_1/",
                type: 'POST',
                tradition: true,
                dataType: 'json',
                data: {'name': name,'cha':gg},
                success: function (data) {
                    if (data.state == 'success') {
                        document.getElementById("message1").innerHTML = '添加成功';
                        window.location.href = data.url
                    } else if (data.state == 'fail') {
                        $('#message1').html(data.message);
                        setTimeout(function () {
                            $('#message1').html('');
                        }, 3000)
                    }
                }
            })
        }
        function chick_1() {
            var name = document.getElementById('user').value;
            var id = document.getElementById('id').value;
            var gg = document.getElementById('photo').value;
            alert(1);
            $.ajax({
                headers: {"X-CSRFToken": '{{ csrf_token }}'},
                url: "myimage_1/",
                type: 'POST',
                tradition: true,
                dataType: 'json',
                data: {'name': name,'id': id,'cha':gg},
                success: function (data) {
                    if (data.state == 'success') {
                        document.getElementById("message1").innerHTML = '修改成功';
                        window.location.href = data.url
                    } else if (data.state == 'fail') {
                        $('#message1').html(data.message);
                        setTimeout(function () {
                            $('#message1').html('');
                        }, 3000)
                    }
                }
            })
        }
        function onon() {
            var aa = document.getElementById('password')
            aa.type = 'text';
            alert('重置成功');
        }
         function changImg(e){
            for (var i = 0; i < e.target.files.length; i++) {
                var file = e.target.files.item(i);
                if (!(/^image\/.*$/i.test(file.type))) {
                    continue; //不是图片 就跳出这一次循环
                }
                //实例化FileReader API
                var freader = new FileReader();
                freader.readAsDataURL(file);
                freader.onload = function(e) {
                    $("#myImg").attr("src",e.target.result);
                }
            }
        }
    </script>
{% endblock %}